<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .title{
            text-align: center;
            color: red;
        }
        .content{
            margin: 10px 10px 0 10px;
        }
        .content1{
            margin: 10px 10px 0 10px;
        }
        .form-inline{
            margin: 10px 10px 0 10px;
        }
        .pages{
            position: absolute;
            left: 20%;
            bottom: 0px;
        }
    </style>
</head>
<body>
<div class="content">
    <div>
        <h2 class="title">日志管理(4.0设备)</h2>
    </div>
    <div class="content1">
        <form class="form-inline">
            <div class="form-group">
                <label for="name">床位名称</label>
                <input type="text" class="form-control" id="name" placeholder="输入床位名称">
            </div>
            <div class="form-group">
                <label for="snCode">设备SN号</label>
                <input type="text" class="form-control" id="snCode" placeholder="输入设备SN号">
            </div>
            <div class="form-group">
                <label for="type">事件类型</label>
                <select  class="form-control" id="type" placeholder="选择事件类型">
                    <option value="0"></option>
                    <option value="1">离床</option>
                    <option value="2">清醒</option>
                    <option value="3">睡觉</option>
                </select>
            </div>
            <div class="form-group">
                <label for="createTime">日期</label>
                <input type="date" class="form-control" id="createTime" placeholder="查询日期">
            </div>
            <button type="button" class="btn btn-success" onclick="list()">查询</button>
            <button type="button" class="btn btn-default" onclick="clearDom()">清空</button>
        </form>
    </div>
    <br/>
    <div class="content1">
        <table class="table table-hover">
           <thead>
           <tr>
               <th>床位名称</th>
               <th>内容</th>
               <th>时间</th>
           </tr>
           </thead>
            <tbody id="body">

            </tbody>
        </table>
    </div>
    <div class="content1  pages" id="page">

    </div>

</div>
<!-- jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="../upload/js/Pagination.js"></script>
<script>
    var current = 1;
    var total = 0;
    var size = 0;
    $(function (){
        list();
    });



    function list(){
        var name = $("#name").val();
        var snCode = $("#snCode").val();
        var createTime = $("#createTime").val();
        var type = $("#type").val();
        var data = {'name':name,'snCode':snCode,'createTime':createTime,'type':type,pageNum:current};
        console.log(data);
        $("#body").empty();
        $.ajax({
            type: "GET",
            url: "../event-log-test/getEventLogTestPage",
            data: data,
            async:false,
            dataType: "json",
            success: function(data){
                current = data.data.current;
                total = data.data.total;
                size = data.data.size;
                var arrays = data.data.records;
                var dom = "";
                $("#page").Pagination({
                    page:current,
                    count:total,
                    groups: size,
                    onPageChange:function (page) {
                        current = page;
                        list();
                    }
                });
                if(arrays!=null){
                    for(var i = 0;i<arrays.length;i++){
                        var temp = arrays[i];
                        var tr= " <tr><td>"+temp.name+"</td><td>"+temp.content+"</td><td>"+temp.createTime.replace('T','&nbsp;')+"</td></tr>"
                        dom+=tr;
                    }

                    $("#body").html(dom);
                }

            }
        });
    }

    function clearDom(){
        console.log('清空')
        $("#name").val('');
        $("#snCode").val('');
        $("#createTime").val('');
        $("#type").val('');

    }

</script>
</body>
</html>